<template>
  <div class="moreYu-container">
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
    <!-- 卡片 -->
    <div class="moreYu-card">
      <!-- 内容 -->
      <div class="moreYu-inner">
        <n-image width="100%" :src="saibaomuyu" @click="goToSaiBoMuYu" preview-disabled />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useConfigStore } from '@renderer/store/config'
import saibaomuyu from '../../assets/image/moreYu/赛博木鱼.png'

/* ******************************通用属性/方法****************************** */
const useConfig = useConfigStore()
const router = useRouter()

/* ******************************卡片属性/方法****************************** */
// 计算径向渐变
onMounted(() => {
  const containerEl = document.querySelector('.moreYu-container') as HTMLElement
  const cardEls = document.querySelectorAll('.moreYu-card') as NodeListOf<HTMLElement>

  // 鼠标移动事件
  containerEl.onmousemove = (e: MouseEvent) => {
    cardEls.forEach((card) => {
      if (!card) return // 确保元素存在
      const rect = card.getBoundingClientRect() // 获取容器的边界信息
      const x = e.clientX - rect.left - rect.width / 2 // 鼠标离视口的距离 - 容器左边缘的距离 - 容器宽度的一半
      const y = e.clientY - rect.top - rect.height / 2 // 同上

      card.style.setProperty('--x', `${x}px`) // 设置高亮区域的 X 坐标
      card.style.setProperty('--y', `${y}px`) // 设置高亮区域的 Y 坐标
    })
  }
})
// 卡片背景颜色
const cardBgColor = computed(() =>
  useConfig.theme === 'light' ? 'rgb(245, 245, 245)' : 'rgb(20,20,20)'
)
// 卡片字体颜色
const cardFontColor = computed(() =>
  useConfig.theme === 'light' ? 'rgb(20, 20, 20)' : 'rgb(245, 245, 245)'
)

// 跳转赛博木鱼
const goToSaiBoMuYu = () => {
  router.push({ path: '/moreYu/saibomuyu' })
}
</script>

<style lang="scss" scoped>
.moreYu-container {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 20px;

  // 第一层 卡片
  .moreYu-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    color: v-bind(cardFontColor);
    background-color: v-bind(cardBgColor);

    // 第二层 高亮区域
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      // 径向渐变(最短边为半径，逐渐透明)
      background: radial-gradient(closest-side circle, v-bind(cardFontColor), transparent);
      // 移动到鼠标位置，给个初始值，避免初始时出现动画
      transform: translate(var(--x, -1000000px), var(--y, -1000000px));
    }

    // 第三层 内容
    .moreYu-inner {
      position: absolute;
      inset: 2px;
      padding: 2px;
      background-color: v-bind(cardBgColor);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: inherit;
    }
  }
}
</style>
